<template>
  <div class="app-item-contain">
    <el-card class="user-index-info-contain user-index-info" shadow="never">
      <info-menu url="/user/index" />
      <div class="center">
        <div class="avatar">
          <!-- <div>
            <span>人员类别：</span><span>{{ userInfo.departmentStr }}</span>
          </div> -->
          <!-- <div>
            <span>职位：</span><span>{{ userInfo.jobTitle }}</span>
          </div> -->
          <el-avatar :src="userInfo.imagePath" shape="circle" fit="scale-down" :size="100" class="user-image">暂无头像
          </el-avatar>
          <el-button class="export" type="primary" @click="exportYryd">一人一档导出</el-button>
        </div>
        <div class="titlerRow">基本信息</div>
        <div class="row">
          <div>
            <span>用户名：</span><span>{{ userInfo.userName }}</span>
          </div>
          <div>
            <span>姓名：</span><span>{{ userInfo.realName }}</span>
          </div>
          <div>
            <span>性别：</span><span>{{ sexFormatter(userInfo.sex) }}</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span>民族：</span><span>{{ userExtend.nation }}</span>
          </div>
          <div>
            <span>出生年月：</span><span>{{ userInfo.birthDay }}</span>
          </div>
          <div>
            <span>籍贯：</span><span>{{ userExtend.nativePlace }}</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span>健康状况：</span><span>{{ userExtend.health }}</span>
          </div>
          <div>
            <span>身份证号：</span><span>{{ userInfo.idCard }}</span>
          </div>
          <div>
            <span>通信地址及邮编：</span><span>{{ userExtend.mailAddressCode }}</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span>手机号：</span><span>{{ userInfo.phone }}</span>
          </div>
          <div>
            <span>电子邮箱：</span><span>{{ userInfo.email }}</span>
          </div>
          <div>
            <span>注册时间：</span><span>{{ userInfo.createTime }}</span>
          </div>
        </div>
        <div class="titlerRow">教育经历</div>
        <div class="row">
          <div>
            <span>政治面貌：</span><span>{{ userExtend.politic }}</span>
          </div>
          <div>
            <span>入党时间：</span><span>{{ userExtend.partyTime }}</span>
          </div>
          <div>
            <span>参加工作时间：</span><span>{{ userExtend.workTime }}</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span>全日制教育：</span><span>{{ userExtend.schoolEducation }}</span>
          </div>
          <div>
            <span>毕业院校及专业：</span><span>{{ userExtend.schoolEducationMajor }}</span>
          </div>
          <div>
            <span>在职教育：</span><span>{{ userExtend.jobEducation }}</span>
          </div>
        </div>
        <div class="row">
          <div>
            <span>毕业院校及专业：</span><span>{{ userExtend.jobEducationMajor }}</span>
          </div>
          <div>
            <span>工作单位及职务/工种：</span><span>{{ userExtend.workUnitType }}</span>
          </div>
        </div>
        <div class="titlerRow">资料</div>
        <el-table :data="tabList" style="width: 100%">
          <el-table-column prop="dictLabel" label="类型">
          </el-table-column>
          <el-table-column label="资料名称">
            <template #default="{ row }">
              <div>
                {{ row.fileList.length > 0 ? row.fileList[0].name : '--' }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="fileList[0].url" label="地址">
          </el-table-column> -->
          <el-table-column fixed="right" label="操作">
            <template #default="{ row }">
              <el-button type="text" size="small">
                <a :href="row.fileList.length > 0 ? row.fileList[0].fileUrl : '--'" target="_blank">查看</a></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        <div v-for="(item, index) in tabList" v-key="index">-->
        <!--          <span>{{ item.dictLabel }}：</span>-->
        <!--          <span>-->
        <!--            <a-->
        <!--              v-for="(file, index) in item.fileList"-->
        <!--              v-key="index"-->
        <!--              :href="file.fileUrl"-->
        <!--              target="_blank"-->
        <!--            >-->
        <!--              {{-->
        <!--                file.fileUrl.split('/')[file.fileUrl.split('/').length - 1]-->
        <!--              }}</a-->
        <!--            >-->
        <!--          </span>-->
        <!--        </div>-->

        <!-- <div>
          <div>证书：</div>
          <el-avatar :src="userInfo.imagePath" shape="shape" fit="scale-down" :size="200" class="user-image">暂无证书
          </el-avatar>
        </div>
        <div>
          <span>证书到期时间：</span><span>{{ userExtend.jobResume }}</span>
        </div> -->
        <!-- <div>
          <span>参加培训考核情况：</span><span>{{ userExtend.trainAttendance }}</span>
        </div>
        <div>
          <span>学员所在单位意见：</span><span>{{ userExtend.unitOpinion }}</span>
        </div>
        <div>
          <span>培训意见：</span><span>{{ userExtend.trainOpinion }}</span>
        </div> -->
        <!-- <div>
          <span>工号：</span><span>{{ userInfo.workNo }}</span>
        </div> -->
        <!-- <div>
          <span>年龄：</span><span>{{ userInfo.age }}</span>
        </div> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { EnumMap, Format } from '@/api/EnumMap';
import InfoMenu from './components/info-menu.vue';
import {
  getCurrentUser,
  exportYryd,
  getUserFileListApi,
  getDictDataType
} from '@/api/user';
import TabDataUpload from '@/components/TabDataUpload/index.vue';

export default {
  components: { TabDataUpload, InfoMenu },
  data() {
    return {
      userInfo: {},
      userExtend: {},
      tabList: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  },
  created() {
    this.infoLoad();
  },
  methods: {
    getTabList() {
      getDictDataType('user_file_type').then(re => {
        this.tabList = re.response;
        this.tabList.forEach(function (item) {
          item.fileList = [];
        });

        this.getUserFileList();
      });
    },
    handleClick(row) {
      console.log(row);
    },
    getUserFileList() {
      let that = this;
      getUserFileListApi({ userId: this.userInfo.id }).then(re => {
        if (re.code === 1) {
          re.response.forEach(function (item) {
            console.log(' this.tabList', that.tabList);
            that.tabList.forEach(function (items, index) {
              if (item.dictCode == items.dictCode) {
                items.fileList.push({
                  ...item,
                  name: item.fileUrl.split('/')[
                    item.fileUrl.split('/').length - 1
                  ],
                  url: item.fileUrl,
                  id: item.id
                });
              }
            });
          });
        }
      });
    },
    infoLoad() {
      getCurrentUser().then(re => {
        this.userInfo = re.response;
        if (re.response.userExtend == null) {
          this.userExtend = {};
        } else {
          this.userExtend = re.response.userExtend;
          this.userExtend.partyTime = re.response.userExtend.partyTime.substr(0, 10)
          this.userExtend.workTime = re.response.userExtend.workTime.substr(0, 10)
        }
        this.getTabList();
        console.log(re);
      });
    },
    sexFormatter(value) {
      return Format(EnumMap.user.sexEnum, value);
    },
    exportYryd() {
      exportYryd(this.userInfo.id).then(res => {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
        const day = currentDate.getDate().toString().padStart(2, '0');
        const time = year + '年' + month + '月' + day + '日';
        let blob = new Blob([res], { type: 'application/zip' });
        // 创建 href 超链接，点击进行下载
        window.URL = window.URL || window.webkitURL;
        let href = URL.createObjectURL(blob);
        let downA = document.createElement('a');
        downA.href = href;
        downA.download = '一人一档' + '-' + this.userInfo.realName + '-' + time;
        downA.click();
        // 销毁超连接
        window.URL.revokeObjectURL(href);
      });
    }
  }
};
</script>
import { useAttrs } from 'element-plus'
